<template>
  <div id="tender">
    <div class="tab-wrap">
      <div>
        <el-tabs v-model.trim="curType" @tab-click="partTypeChange">
          <el-tab-pane :label="item.name" :name="item.value" v-for="item in partTypeList" :key="item.name">
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="list-container">
      <element-table
        ref="tables"
        :isHaveIndex="false"
        :interface="Interface"
        @pagChange="pagChange"
        @sortChange="sortChange"
      >
        <template #tableHeader>
          <el-table-column width="60" align="center" type="index" label="序号">
            <el-table-column width="60" align="center" type="index" label="检索">
              <template slot-scope="scope">
                <div>
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="招标编号" align="center">
            <el-table-column align="center" sortable="custom" prop="biddingNo" width="150">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="招标内容" align="center">
            <el-table-column align="center" sortable="custom" prop="materialInfo" width="150" show-overflow-tooltip>
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="采购商名称" align="center">
            <el-table-column align="center" sortable="custom" prop="enterpriseName" width="150">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="预估金额(万元)" align="center">
            <el-table-column align="center" prop="estimateTotalPrice" width="150">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="报价金额(万元)" align="center">
            <el-table-column align="center" sortable="custom" prop="quoteNum" width="150">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="投标时间" align="center">
            <el-table-column align="center" sortable="custom" prop="createTime" width="180">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="投标家数" align="center">
            <el-table-column align="center" sortable="custom" prop="bidNum" width="150">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="状态" align="center" v-if="curType == 0">
            <el-table-column align="center" sortable="custom" prop="stateDescription" width="150">
              <template slot="header" align="center" slot-scope="{}">
                <div class="searchBox" @click.stop>
                  <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <el-table-column align="center" width="200">
              <template slot-scope="scope">
                <div v-if="curType === '0'">
                  <el-button
                    type="text"
                    class="xg czBtn"
                    size="small"
                    v-if="scope.row.processSon === 0"
                    @click="handleClick('编辑', scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button type="text" class="xg czBtn" size="small" v-else @click="handleClick('查看', scope.row)">
                    查看
                  </el-button>
                  <el-button type="text" class="sc czBtn" size="small" @click="handleClick('删除', scope.row)">
                    删除
                  </el-button>
                </div>
                <div v-else-if="curType === '3'">
                  <el-button type="text" class="xg czBtn" size="small" @click="handleClick('查看', scope.row)">
                    查看
                  </el-button>
                </div>
                <div v-else>
                  <el-button type="text" class="xg czBtn" size="small" @click="handleClick('查看', scope.row)">
                    查看
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </template>
      </element-table>
    </div>
    <el-dialog
      v-if="bidVisible"
      class="dialog_detail"
      :center="true"
      :close-on-click-modal="false"
      width="1200px"
      :title="title"
      lock-scroll
      :visible.sync="bidVisible"
    >
      <tender-fill :check="Check" :Id="biddingId" :bidId="bidId" @close="close" ref="tender"></tender-fill>
    </el-dialog>
  </div>
</template>

<script>
import ElementTable from '../../../components/ElementTable.vue'
import TenderFill from '../../../components/TenderFill.vue'
export default {
  components: { ElementTable, TenderFill },
  data() {
    return {
      contractVisible: false,
      title: '',
      biddingId: null,
      bidId: null,
      Check: true, // 是否为查看
      bidVisible: false,
      searchQrcoUsed: '',
      searchPositionName: '',
      curType: '0',
      partTypeList: [
        {
          value: '0',
          name: '待投标'
        },
        {
          value: '1',
          name: '已投标'
        },
        {
          value: '2',
          name: '已入围·议价'
        },
        {
          value: '3',
          name: '中标'
        },
        {
          value: '4',
          name: '未中标'
        }
      ],
      Interface: {
        method: 'post',
        url: '/bidAdmin/listBidStatusQuery',
        data: {
          page: 1,
          processState: 0,
          size: 15
        }
      },
      key: 0
    }
  },
  mounted() {},
  methods: {
    close() {
      this.bidVisible = false
      this.$refs.tables.getData()
    },
    handleClick(val, scope) {
      this.bidId = scope.id
      this.biddingId = scope.biddingId
      if (val === '编辑') {
        this.title = '投标书填写页'
        this.bidVisible = true
        this.Check = true
      } else if (val === '查看') {
        this.title = '查看投标书'
        this.bidVisible = true
        this.Check = false
      } else {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$https({
              method: 'post',
              url: '/bidAdmin/deleateBid?bidIds=' + this.bidId,
              data: {}
            })
              .then(res => {
                if (res.code === 0) {
                  this.$message.success('删除成功')
                  this.$refs.tables.getData()
                } else {
                  this.$message.error(res.msg)
                }
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch(() => {})
      }
    },
    // 选项卡切换时改变对应状态
    partTypeChange() {
      if (this.curType === '0') {
        this.Interface.data.processState = 0
      } else if (this.curType === '1') {
        this.Interface.data.processState = 1
      } else if (this.curType === '2') {
        this.Interface.data.processState = 2
      } else if (this.curType === '3') {
        this.Interface.data.processState = 3
      } else if (this.curType === '4') {
        this.Interface.data.processState = 4
      }
      // 子组件重新获取数据
      this.$refs.tables.getData()
      // 子组件重新获取数据后表格样式重置
      this.$nextTick(() => {
        this.$refs.tables.tableStyleInit()
      })
    },
    pagChange(data) {
      this.Interface.data.page = data.currentPage
      this.Interface.data.size = data.pagesize
      this.$refs.tables.getData()
    },
    sortChange(e) {
      console.log(e)
    },
    getDataChange() {
      this.$refs.tables.getData()
    }
  }
}
</script>
<style lang="less" scoped>
#tender {
  height: 100%;
  .list-container {
    height: calc(100% - 116px);
    padding: 16px 16px 40px 16px;
  }
  .sc,
  .ty {
    color: #ff3d3d;
  }
}
</style>
<style lang="less">
#tender {
  .tab-wrap {
    padding: 0 16px;
    border-bottom: 1px solid #ebebeb;
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .el-tabs__item {
      height: 60px;
      line-height: 60px;
    }
    .el-tabs__header {
      margin: 0;
    }
  }
}
</style>
